<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>小郭|吉他郭|AndyGuo</title>
	<link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
	<style>
		[v-cloak] {
			display: none;
		}
		.pic-list {
		    display: flex;
		    flex-wrap: wrap;
		}

		.pic-list>.item {
		    width: 50%;
		}

		.page-wrap {
		    max-width: 1200px;
		    margin-left: auto;
		    margin-right: auto;
		}

		img {
		    max-width: 100%;
		}

		.pic-list>.item a {
		    display: block;
		    margin: 5px;
		    overflow: hidden;
		}
		.pic-list>.item a img {
		    transition: .5s;
		}

		.pic-list>.item a:hover img {
		    transform: scale(1.1);
		}
		
		footer{
			height: 90px;
		}
		header {
		    position: relative;
		}

		header h4 {
		    position: absolute;
		    text-align: center;
		    top: 50%;
		    color: #fff;
		    width: 100%;
		    font-size: 16px;
		}
		@media (min-width: 768px) {
			header h4{
				font-size: 32px;
			}
			.pic-list>.item {
			    width: 25%;
			}
			.pic-list>.item a{
				margin: 10px;
			}
		}

	</style>
</head>
<body>
<header>
	<div class="big-bg"><img src="https://andy168.gitee.io/andyimg/img/big-bg.jpg"></div>
	<h4>我们在不断的奔跑 却忘了欣赏沿途的风景</h4>
</header>

<div class="page-wrap">
	<div class="pic-list" v-cloak>
		<div class="item" v-for="(v,index) in 100" >
			<a @click="msg" href="###"><img :src="domain+'p'+(index+1)+'.jpg'" ></a>
		</div>
	</div>
</div>
<footer>
	
</footer>
<script src="https://andy168.gitee.io/dctimer/js/jquery.min.2.1.4.js"></script>
<script src="https://andy168.gitee.io/dctimer/js/vue.min.js"></script>
<script src="https://andy168.gitee.io/dctimer/js/axios.min.js"></script>
<script>
function ImageLoadEx() {  
    $('img').error(function () {
        $(this).parents(".item").remove();
        
    });
}
$(function(){
	var vm = new Vue({
		el:".pic-list",
		data:{
		    piclists:"正在请求数据...",
		    domain:"https://andy168.gitee.io/andyimg/d163_net/"

		},
		mounted(){
		    axios
		        .get('json/list.json')
		        .then(response => this.piclists = response.data.lists)
		        .catch(function(error){
		            console.log(error);
		        })
		},
		methods:{
			msg:function(){
				alert("右键另存为可以下载图片哦");
			}
		}
	})
	
	ImageLoadEx();


})
	
</script>
</body>
</html>